import { useEffect, useRef, useState } from 'react';
import { getData5 } from '../Data'
import { useMount, useReactive } from 'ahooks';
import { FlexGrid } from '@grapecity/wijmo.react.grid';
import { FlexGridFilter } from "@grapecity/wijmo.react.grid.filter";
import { FlexGridSearch } from '@grapecity/wijmo.react.grid.search';

const WijmoK03 = () => {
    const InitData = useReactive({})

    const SearchRef = useRef()
    const FlexRef = useRef()

    const [Data, setData] = useState()
    useMount(() => {
        setData(getData5(200))
    })

    useEffect(() => {
        const theGrid = FlexRef.current.control
        const theSearch = SearchRef.current.control
        theSearch.grid = theGrid
    }, [])

    return (
        <div className="Page">
            <div className='Label'>
                <label>高亮搜索 : </label>
                <FlexGridSearch ref={SearchRef} />
            </div>
            <FlexGrid ref={FlexRef} itemsSource={Data}>
                <FlexGridFilter />
            </FlexGrid>
        </div>
    )
};

export default WijmoK03